<template>
  <div class="main">
    <!-- form表单组件 -->
    <van-form validate-first @failed="onFailed" @submit="onSubmit">
      <!-- 头部信息 -->
      <div class="headerWrap">
        <div class="header">
          <span>为了保证您的按时用餐，亲及时预定！</span>
        </div>
      </div>

      <!-- 预约信息 -->
      <div class="top">
        <div class="msg">预约信息</div>
        <!-- 预定时间 -->
        <van-field name="arrivalTime">
          <template #input field-label-width="4em">
            <van-cell is-link arrow-direction="down">
              <!-- 使用 title 插槽来自定义标题 -->
              <template #title>
                <div class="custom-title title" @click="show = true">
                  <!-- 预定时间：{{ formatDate(currentDate) }} -->
                  预定时间：{{ currentDate | formatDate}}
                </div>
                <!-- 遮罩层组件 -->
                <van-overlay :show="show" @click="show = false">
                  <div class="wrapper" @click.stop>
                    <div class="block" />
                    <!-- 选择时间组件 -->
                    <van-datetime-picker
                      @confirm="onConfirm"
                      @cancel="show = false"
                      title="请选择用餐时间"
                      v-model="currentDate"
                      :min-date="minDate"
                      :max-date="maxDate"
                      type="datetime"
                    />
                  </div>
                </van-overlay>
              </template>
            </van-cell>
          </template>
        </van-field>

        <!-- 折叠面板组件 -->
        <van-collapse
          v-model="activeNames"
          @change="changeItem"
          :accordion="false"
        >
          <!-- 餐桌类型 -->
          <van-field name="table" v-model="index_list">
            <template #input field-label-width="4em">
              <van-collapse-item name="2">
                <template #title>
                  <div class="title">餐桌类型： {{ index_list }}</div>
                </template>
                <van-list>
                  <van-cell
                    class="table_type"
                    v-for="item in Tablelist"
                    :key="item"
                    :title="item"
                    ref="tableType"
                    @click="Table(item)"
                  />
                </van-list>
              </van-collapse-item>
            </template>
          </van-field>
          <!-- 就餐人数 -->
          <van-field name="number" v-model="person_list">
            <template #input field-label-width="4em">
              <van-collapse-item name="3">
                <template #title>
                  <div class="title" ref="number">
                    就餐人数：{{ person_list }}
                  </div>
                </template>
                <van-list>
                  <van-cell
                    v-for="item in list"
                    :key="item"
                    :title="item"
                    @click="choose(item)"
                  />
                </van-list>
              </van-collapse-item>
            </template>
          </van-field>
        </van-collapse>
      </div>
      <!-- 分隔符 -->
      <div class="line"></div>
      <!-- 联系人信息 -->
      <div class="middle">
        <div class="connect">联系人信息</div>

        <!-- 通过 pattern 进行正则校验 -->
        <!-- 联系人 -->
        <van-field
          label-width="4em"
          label="联系人"
          v-model="linkman"
          name="linkman"
          placeholder="请输入您的姓名"
          :rules="[{ pattern: name, message: '请输入正确的姓名' }]"
        />
        <!-- 性别 -->
        <van-field name="sex" label="性 别" label-width="4em">
          <template #input>
            <van-radio-group
              v-model="radio"
              direction="horizontal"
              checked-color="#ee0a24"
            >
              <van-radio name="女"> 女</van-radio>
              <van-radio name="男" style="marginleft: 30px"> 男</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <!-- 手机号 -->
        <van-field
          label-width="4em"
          v-model="phone"
          label="手机号"
          name="phone"
          placeholder="请输入您的手机号"
          :rules="[{ pattern: phoneReg, message: '请输入正确的手机号码' }]"
        />
        <!-- 备注 -->
        <van-field
          label-width="4em"
          v-model="remarks"
          rows="2"
          autosize
          name="remarks"
          label="备 注"
          type="textarea"
          maxlength="50"
          placeholder="请输入内容"
          show-word-limit
        />
        <!-- 确认提交按钮 -->
        <div style="margin: 16px">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            color="#ed0d0d"
          >
            确认提交
          </van-button>
        </div>
      </div>
    </van-form>
    <div class="gohome" @click="gohome">
      <i class="iconfont icon-tuichu"></i>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import axios from "axios";
import moment from "moment";
import {
  Collapse,
  CollapseItem,
  Calendar,
  DatetimePicker,
  Form,
  Toast,
  RadioGroup,
  Radio,
  Dialog,
  Overlay,
  Cell,
  CellGroup,
  List,
} from "vant";

Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(Calendar);
Vue.use(DatetimePicker);
Vue.use(Form);
Vue.use(Toast);
Vue.use(RadioGroup);
Vue.use(Radio);
Vue.use(Dialog);
Vue.use(Overlay);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(List);

export default {
  data() {
    return {
      show: false,
      activeNames: ["1"],
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2030, 10, 1),
      currentDate: new Date(),
      radio: "",
      linkman: "",
      phone: "",
      remarks: "",
      name: /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,4}$/,
      phoneReg: /^((\(\d{2,3}\))|(\d{3}\-))?1(3|5|8|9)\d{9}$/,
      list: [
        "1人",
        "2人",
        "3人",
        "4人",
        "5人",
        "6人",
        "7人",
        "8人",
        "9人",
        "10人",
      ],
      loading: false,
      finished: false,
      Tablelist: ["1-2人桌", "3-4人桌", "6人桌", "8人桌", "10人桌"],
      index_list: "",
      person_list: "",
      time_list: "",
    };
  },
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  created() {
    // 底部菜单隐藏
    this.$store.state.footerNavShow = false
  },
  mounted() {},
  methods: {
    // 校验函数返回 true 表示校验通过，false 表示不通过
    validator(val) {
      return /1\d{10}/.test(val);
    },
    // 提交失败事件
    onFailed(errorInfo) {
      Dialog.alert({
        title: "提交失败",
      }).then(() => {
        // on close
      });
      // console.log("failed", errorInfo);
    },
    // 确认提交事件
    onSubmit(values) {
      // console.log("submit", values);
      axios
        .post("http://10.9.46.208:9090/api/v1/appointment", {
          commitTime: moment(new Date()).format("YYYY-MM-DD HH:mm:ss"),
          arrivalTime: moment(this.currentDate).format("YYYY-MM-DD HH:mm:ss"),
          number: this.person_list,
          orderStatu: this.orderStatu,
          linkman: this.linkman,
          phone: this.phone,
          remarks: this.remarks,
          sex: this.radio,
          tableType: this.tableType,
        })
        .then(() => {
        });
      Dialog.alert({
        title: "提交成功",
      }).then(() => {
        // on close
      this.$store.state.footerNavShow = true

        this.$router.push("/home")
      });
    },
    changeItem() {
      // this.$refs['item-title'].toggle(false)
    },
    // 点击餐桌类型事件
    Table(item) {
      this.index_list = item;
    },
    // 点击就餐人数事件
    choose(item) {
      this.person_list = item;
    },
    // 点击确认提交事件
    onConfirm(values) {
      // console.log("confirm", values);
      this.time_list = values;
      // 弹框组件事件
      Dialog.confirm({
        title: "期待您的到来哦!",
      })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    },
    // 点击取消事件
    onCancel() {},
    gohome(){
      this.$store.state.footerNavShow = true
      this.$router.push("/home")
    }
  },
};
</script>
<style type="text/scss" lang='scss' scoped>
.gohome{
  height: 25px;
  width: 25px;
  border-radius: 50%;
  // background: #e4cd88;
  color: #666;
  position: fixed ;
  top: 15px;
  right: 30px;
  text-align: center;
  i{
    line-height: 25px;
    
  }
}
// 头部
.headerWrap {
  height: 50px;
  background: rgb(241, 241, 241);
  padding-top: 7px;
  .header {
    margin-left: 23px;
    background: #fff;
    border-radius: 20px;
    width: 328px;
    height: 40px;
    line-height: 40px;
    font-family: "微软雅黑";
    font-weight: 400;
    font-style: normal;
    text-align: center;
    i {
      font-size: 16px;
      color: #e4cd88;
    }
    span {
      display: inline-block;
      margin-left: 5px;
      font-family: "微软雅黑";
      font-weight: 400;
      font-style: normal;
      font-size: 13px;
      color: #e4cd88;
    }
  }
}
// 预约信息
.top {
  .van-cell {
    .van-cell {
      padding: 0;
    }
  }
  .van-collapse {
    .van-cell {
      padding: 0;
      line-height: 38px;
      .van-cell__title {
        text-align: center;
        font-size: 12px;
        color: #999;
      }
    }
    .van-collapse-item {
      width: 100%;
    }
  }
  .msg {
    padding-left: 14px;
    font-family: "微软雅黑";
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #666666;
    text-align: left;
    width: 100%;
    height: 38px;
    line-height: 38px;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    box-sizing: border-box;
    border-bottom: 1px solid rgba(242, 242, 242, 1);
  }
  .title {
    text-align: left;
    font-family: "微软雅黑";
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    color: #999999;
    text-align: left;
    border: none;
  }
}

.line {
  height: 10px;
  background: #f1f1f1;
}
// 联系人信息
.middle {
  .connect {
    padding-left: 14px;
    height: 38px;
    line-height: 38px;
    font-family: "微软雅黑";
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #666666;
    text-align: left;
    border-bottom: 1px solid rgba(242, 242, 242, 1);
  }
  .van-field {
    font-size: 14px;
    color: #999;
  }
}
</style>
